<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>中科碳和</title>
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">
    <link rel="stylesheet" th:href="@{/cweb/css/customer-20211209.css}"/>
</head>
<body>
<div class="header">
    <div th:replace="home/cfragments/navbar :: cnavbar"></div>
</div>

<!--轮播图-->
<div class="banner">
    <div class="shutter">
        <div class="shutter-img">
            <a th:each="rotationImg : ${rotationImgs}" href="javascript:void(0);" data-shutter-title="">
                <img th:src="${rotationImg.rotationImage}" alt="#">
            </a>
        </div>
        <ul class="shutter-btn" style="margin-bottom: 0">
            <li class="prev"></li>
            <li class="next"></li>
        </ul>
    </div>
</div>

<span th:if="${CURRENT_CUSTOMER == null}">
    <span id="no_login"></span>
</span>
<div class="card-container">

    <div class="card-button">
        <button class="btn active" id="chemicalindustry">化工</button>
        <button class="btn" id="electricityGeneration">发电设施</button>
        <button class="btn" id="powergrid">电网</button>
        <button class="btn" id="magnesiumsmelting">镁冶炼</button>
        <button class="btn" id="aluminumsmelting">铝冶炼</button>
        <button class="btn" id="steel">钢铁生产</button>
        <button class="btn" id="aviation">民用航空</button>
        <button class="btn" id="plateglass">平板玻璃生产</button>
        <button class="btn" id="cement">水泥生产</button>
        <button class="btn" id="ceramics">陶瓷生产</button>
        <button class="btn" id="coal">煤炭生产</button>
        <button class="btn" id="spin">纺织服装</button>

        <button class="btn">石油天然气生产</button>
        <button class="btn">造纸和纸制品生产</button>
        <button class="btn">石油化工</button>
        <button class="btn">独立焦化</button>
        <button class="btn">氟化工</button>
        <button class="btn">矿山</button>
        <button class="btn" id="build">建筑</button>
        <button class="btn">电子设备制造</button>
        <button class="btn">机械设备制造</button>
        <button class="btn">陆上交通运输</button>
        <button class="btn">食品烟草及酒饮料和精制茶叶</button>
        <button class="btn">其他有色金属冶炼和延压加工</button>
        <button class="btn">工业其他行业</button>
    </div>

    <div class="card-main" id="container">
        <div class="one" style="width: 86vw;height: 100%">
            <div class="content-top" style="border-radius:15px">
            <span class="card-text-title-btn">
                <button type="button" class="btn btn-primary" onclick="chemicalindustry()">去体验</button>
            </span>
            </div>
        </div>
    </div>
</div>
<!--后台置顶5个带封面的文章-->
<div class="main-container">
    <div class="content">
        <div class="left">
            <a th:if="${topArticles.size() > 0}" th:href="@{${('/blog/article/' + topArticles.get(0).id)}}">
                <div class="top">
                    <img th:src="@{${topArticles.get(0).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(0).title}"></p>
                </div>
            </a>
            <a th:if="${topArticles.size() > 1}" th:href="@{${('/blog/article/' + topArticles.get(1).id)}}">
                <div class="bottom">
                    <img th:src="@{${topArticles.get(1).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(1).title}"></p>
                </div>
            </a>
        </div>
        <div class="center">
            <a th:if="${topArticles.size() > 2}" th:href="@{${('/blog/article/' + topArticles.get(2).id)}}">
                <div class="top">
                    <img th:src="@{${topArticles.get(2).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(2).title}"></p>
                </div>
            </a>
            <a th:if="${topArticles.size() > 3}" th:href="@{${('/blog/article/' + topArticles.get(3).id)}}">
                <div class="bottom">
                    <img th:src="@{${topArticles.get(3).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(3).title}"></p>
                </div>
            </a>
        </div>
        <div class="right">
            <a th:if="${topArticles.size() > 4}" th:href="@{${('/blog/article/' + topArticles.get(4).id)}}">
                <div class="top">
                    <img th:src="@{${topArticles.get(4).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(4).title}"></p>
                </div>
            </a>
            <a th:if="${topArticles.size() > 5}" th:href="@{${('/blog/article/' + topArticles.get(5).id)}}">
                <div class="bottom">
                    <img th:src="@{${topArticles.get(5).coverImage}}" alt=""/>
                    <p th:text="${topArticles.get(5).title}"></p>
                </div>
            </a>
        </div>
    </div>
</div>

<div class="footer">
    <div th:replace="home/cfragments/footer :: cfooter"></div>
</div>
<script th:src="@{/cweb/js/velocity.js}"></script>
<script th:src="@{/cweb/js/shutter.js}"></script>
<script>
    $(function () {

        $('.shutter').shutter({
            /*shutterW: 1000, // 容器宽度
            shutterH: 358, // 容器高度*/
            isAutoPlay: true, // 是否自动播放
            playInterval: 3000, // 自动播放时间
            curDisplay: 0, // 当前显示页
            fullPage: false // 是否全屏展示
        });


        $('.card-button').find('.btn').each(function () {
            $(this).click(function () {
                cardContent($(this).attr('id'), $(this));
            });

        });


        afterCardChange();
    });

    function cardContent(type, obj) {
        $('.card-button').find('button').removeClass('active');
        obj.addClass('active');

        type = type || 'build';
        $('#card-content').load('/blog/card/' + type + ' #container', function () {
            afterCardChange();
        });
    }

    function eg() {
        window.location.href = '/blog/eg';
    }

    function getPowerGrid() {
        window.location.href = '/blog/powergrid';
    }

    function afterCardChange() {

        $('.one').mouseover(function () {
            enterCard($(this));
        });

        $('.one').mouseout(function () {
            outCard($(this));
        });

        $('.two').mouseover(function () {
            enterCard($(this));
        });

        $('.two').mouseout(function () {
            outCard($(this));
        });

        $('.three').mouseover(function () {
            enterCard($(this));
        });

        $('.three').mouseout(function () {
            outCard($(this));
        });
    }

    function enterCard(obj) {
        //边框变蓝色
        obj.find('div').addClass('card-main-mouseenter');
        obj.find('button').addClass('card-button-mouseenter')
    }

    function outCard(obj) {
        obj.find('div').removeClass('card-main-mouseenter')
        obj.find('button').removeClass('card-button-mouseenter')
    }

</script>
</body>
</html>
